<template>
	<view class="container">
		<u-navbar left-icon="search" left-icon-size="30" @leftClick="onClickLeft" title="Favorites"></u-navbar>
		<view class="sort" :style="{marginTop: marginViewHeight}">
			<scroll-view class="scroll" scroll-x="true" enable-flex="true" :scroll-into-view="scrollIntoIndex">
				<view v-for="(item,index) in sortBar" :key="index" @tap='changeTab(index)'
					:class='topBarIndex === index ? "bgActive":"bg"' :id="'top'+index">
					<view :class='topBarIndex === index ? "active":" "'>
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="choose-icon">
				<button class="choose-item" @click="openPop()">
					<image src="../../../static/images/favorite/icon/filter.png"></image>
					<text>Filters</text>
				</button>
				<button class="choose-item" @click="changePrice()">
					<image src="../../../static/images/favorite/icon/price.png"></image>
					<text>Price</text>
				</button>
				<button class="choose-item" @click="changeListType()">
					<image src="../../../static/images/favorite/icon/grid.png"></image>
					<text>Grid</text>
				</button>
			</view>
		</view>
		<swiper @change="onChangeTab" :current="topBarIndex"
			:style="{ height: swiperHeight,paddingTop: marginSwiperHeight}"> <!-- marginTop: marginSwiperHeight -->
			<swiper-item>
				<view class="home-data">
					<view :class="listType == 'grid'? 'list':'list2'">
						<view class="list-item" v-for="item in goodsList1" :key="item.id">
							<image :src="item.imgUrl"></image>
							<view class="list-detail">
								<view class="list-collect" v-if="listType == 'grid'">
									<view v-for="(item2, index2) in item.collectStar" :key="index2">
										<image src="../../../static/images/favorite/icon/stat.png"></image>
									</view>
									<view v-for="(item3, index3) in ( 5-item.collectStar)" :key="index3">
										<image src="../../../static/images/favorite/icon/emptyStar.png"></image>
									</view>
									<text class="collect-word">({{item.collectNum}})</text>
								</view>
								<text class="list-type">{{ item.goodsType }}</text>
								<text class="list-name">{{ item.goodsName }}</text>
								<view class="list-specification" v-if="listType == 'list'">
									<text>
										Color:
										<text class="goods-color">{{ item.goodsColor }}</text>
											Size:
										<text class="goods-size">{{ item.goodsSize }}</text>
									</text>
								</view>
								<view class="list-bottom">
									<text class="list-price">{{ item.goodsPrice }}</text>
									<view class="list-collect"  v-if="listType == 'list'">
										<view v-for="(item2, index2) in item.collectStar" :key="index2">
											<image src="../../../static/images/favorite/icon/stat.png"></image>
										</view>
										<view v-for="(item3, index3) in ( 5-item.collectStar)" :key="index3">
											<image src="../../../static/images/favorite/icon/emptyStar.png"></image>
										</view>
										<text class="collect-word">({{item.collectNum}})</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="home-data">
					<view :class="listType == 'grid'? 'list':'list2'">
						<view class="list-item" v-for="item in goodsList2" :key="item.id">
							<image :src="item.imgUrl"></image>
							<view class="list-detail">
								<view class="list-collect" v-if="listType == 'grid'">
									<view v-for="(item2, index2) in item.collectStar" :key="index2">
										<image src="../../../static/images/favorite/icon/stat.png"></image>
									</view>
									<view v-for="(item3, index3) in ( 5-item.collectStar)" :key="index3">
										<image src="../../../static/images/favorite/icon/emptyStar.png"></image>
									</view>
									<text class="collect-word">({{item.collectNum}})</text>
								</view>
								<text class="list-type">{{ item.goodsType }}</text>
								<text class="list-name">{{ item.goodsName }}</text>
								<view class="list-specification" v-if="listType == 'list'">
									<text>
										Color:
										<text class="goods-color">{{ item.goodsColor }}</text>
											Size:
										<text class="goods-size">{{ item.goodsSize }}</text>
									</text>
								</view>
								<view class="list-bottom">
									<text class="list-price">{{ item.goodsPrice }}</text>
									<view class="list-collect"  v-if="listType == 'list'">
										<view v-for="(item2, index2) in item.collectStar" :key="index2">
											<image src="../../../static/images/favorite/icon/stat.png"></image>
										</view>
										<view v-for="(item3, index3) in ( 5-item.collectStar)" :key="index3">
											<image src="../../../static/images/favorite/icon/emptyStar.png"></image>
										</view>
										<text class="collect-word">({{item.collectNum}})</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="home-data">
					333
				</view>
			</swiper-item>
			<swiper-item>
				<view class="home-data">
					4
				</view>
			</swiper-item>
		</swiper>
		<!-- 弹出层 -->
		<u-popup :show="show" :round="40" mode="bottom" @close="closePop" @open="openPop">
			<view class="pop">
				<view class="pop-title">
					<text>Sort by</text>
				</view>
				<view class="pop-contact">
					<text v-for="item in chooseList" :key="item.id" :class="chooseId == item.id ? '.choose':''"
						@click="changeChoose(item, index)">{{item.chooseName}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				choose: true, //控制选中的按钮样式
				marginViewHeight: '', // .sort margin高度
				marginSwiperHeight: '', //swiper margin高度
				swiperHeight: '', //swiper内容高度
				sortHeight: '', //fixed高度（不包括导航栏）
				topBarIndex: 0, //导航选中的索引
				scrollIntoIndex: 'top0', //导航选中的索引
				listType: 'grid', //列表显示默认为: 网格
				show: false, //控制弹出层的显示,
				chooseId: 1,
				priceFrom: 'high',	// 价格升序（从低到高）:low ,价格降序（从高到低）:high  (默认降序)
				sortBar: [{
						name: 'Abaya'
					},
					{
						name: 'Sport'
					},
					{
						name: 'Jeans'
					},
					{
						name: 'Kitty'
					},
				],
				goodsList1: [{
						id: 1,
						imgUrl: '../../../static/images/favorite/list/goods1.png',
						goodsType: 'Abaya',
						goodsName: 'Soft Touch Abaya Soft Touch Abaya',
						goodsPrice: '$ 116',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Blue',
						goodsSize: 'S',
						shelfData: '2024-05-25'
					},
					{
						id: 2,
						imgUrl: '../../../static/images/favorite/list/goods2.png',
						goodsType: 'Abaya',
						goodsName: 'Casual Abaya',
						goodsPrice: '$ 87',
						collectStar: 3,
						collectNum: 8,
						goodsColor: 'Pink',
						goodsSize: 'S',
						shelfData: '2024-05-26'
					},
					{
						id: 3,
						imgUrl: '../../../static/images/favorite/list/goods3.png',
						goodsType: 'Abaya',
						goodsName: 'Abaya With Bluu Split',
						goodsPrice: '$ 66',
						collectStar: 4,
						collectNum: 23,
						goodsColor: 'Blue',
						goodsSize: 'L',
						shelfData: '2024-05-20'
					},
					{
						id: 4,
						imgUrl: '../../../static/images/favorite/list/goods4.png',
						goodsType: 'Abaya',
						goodsName: 'Green Contrast Split Abaya',
						goodsPrice: '$ 135',
						collectStar: 4,
						collectNum: 11,
						goodsColor: 'Green',
						goodsSize: 'S',
						shelfData: '2024-05-29'
					},
					{
						id: 5,
						imgUrl: '../../../static/images/favorite/list/goods1.png',
						goodsType: 'Abaya',
						goodsName: 'Soft Touch Abaya',
						goodsPrice: '$ 116',
						collectStar: 5,
						collectNum: 4,
						goodsColor: 'Blue',
						goodsSize: 'S',
						shelfData: '2024-04-28'
					},
					{
						id: 6,
						imgUrl: '../../../static/images/favorite/list/goods2.png',
						goodsType: 'Abaya',
						goodsName: 'Casual Abaya',
						goodsPrice: '$ 87',
						collectStar: 4,
						collectNum: 13,
						goodsColor: 'Pink',
						goodsSize: 'S',
						shelfData: '2024-05-25'
					},
					{
						id: 7,
						imgUrl: '../../../static/images/favorite/list/goods3.png',
						goodsType: 'Abaya',
						goodsName: 'Abaya With Bluu Split',
						goodsPrice: '$ 66',
						collectStar: 5,
						collectNum: 13,
						goodsColor: 'Blue',
						goodsSize: 'S',
						shelfData: '2024-05-26'
					},
					{
						id: 8,
						imgUrl: '../../../static/images/favorite/list/goods4.png',
						goodsType: 'Abaya',
						goodsName: 'Soft Touch Abaya',
						goodsPrice: '$ 135',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Green',
						goodsSize: 'L',
						shelfData: '2024-05-22'
					}
				],
				goodsList2: [{
						id: 1,
						imgUrl: '../../../static/images/favorite/list/goods5.png',
						goodsType: 'H&M',
						goodsName: 'T Shirt Heather',
						goodsPrice: '$ 72',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Blue',
						goodsSize: 'XL',
						shelfData: '2024-05-26'
					},
					{
						id: 2,
						imgUrl: '../../../static/images/favorite/list/goods6.png',
						goodsType: 'Adidas',
						goodsName: 'Black T Shirt',
						goodsPrice: '$ 45',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Black',
						goodsSize: 'L',
						shelfData: '2024-05-26'
					},
					{
						id: 3,
						imgUrl: '../../../static/images/favorite/list/goods7.png',
						goodsType: 'H&M',
						goodsName: 'Navy Solid Color',
						goodsPrice: '$ 28',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Gray',
						goodsSize: 'XL',
						shelfData: '2024-05-27'
					},
					{
						id: 4,
						imgUrl: '../../../static/images/favorite/list/goods8.png',
						goodsType: 'NB',
						goodsName: 'Button Front blue',
						goodsPrice: '$ 26',
						collectStar: 5,
						collectNum: 10,
						goodsColor: 'Blue',
						goodsSize: 'XL',
						shelfData: '2024-04-29'
					}
				],
				chooseList: [{
						id: 1,
						chooseName: 'Popular'
					},
					{
						id: 2,
						chooseName: 'Newest'
					},
					{
						id: 3,
						chooseName: 'Customer review'
					},
					{
						id: 4,
						chooseName: 'Price: lowest to high'
					},
					{
						id: 5,
						chooseName: 'Price: high to lowest'
					}
				]
			}
		},
		methods: {
			getBarHeight() {
				//胶囊高度
				const iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const customHeight = wx.getMenuButtonBoundingClientRect()
				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				const navigationBarHeight = customHeight.height + (customHeight.top - iStatusBarHeight)
				// console.log("胶囊高度" + iStatusBarHeight);
				// console.log("导航栏高度" + navigationBarHeight);
				this.marginViewHeight = iStatusBarHeight + 44 + 'px'
				this.marginSwiperHeight = iStatusBarHeight + 44 + this.sortHeight + 'px'
			},
			// 导航栏滑块事件
			changeTab(index) {
				this.toTop();
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = 'top' + index;
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current);
				this.getCurrentSwiperHeight('.home-data');

			},
			//获取内容块高度 .home-data
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.topBarIndex].height + 'px';
					this.getBarHeight();
				})
			},
			//获取内容块高度 .sort
			getSortSwiperHeight() {
				//头部fixed高度
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.sort').boundingClientRect();
				query.exec((res) => {
					// console.log(res);
					// console.log(res[0][this.topBarIndex])
					this.sortHeight = res[0][this.topBarIndex].height;
				})
			},
			//搜索
			onClickLeft() {
				uni.showToast({
					icon: 'none',
					title: '搜索功能待开发，敬请期待',
					duration: 1000
				});
			},
			//价格升序
			priceLow() {
				this.priceFrom = 'low';
				this.goodsList1.sort((a, b) => {
					const priceA = parseFloat(a.goodsPrice.replace(/[^0-9.]/g, ''));
					const priceB = parseFloat(b.goodsPrice.replace(/[^0-9.]/g, ''));
					return priceA - priceB;
				});
				this.toTop();
			},
			//价格降序
			priceHigh() {
				this.priceFrom = 'high';
				this.goodsList1.sort((a, b) => {
					const priceA = parseFloat(a.goodsPrice.replace(/[^0-9.]/g, ''));
					const priceB = parseFloat(b.goodsPrice.replace(/[^0-9.]/g, ''));
					return priceB - priceA;
				});
				this.toTop();
			},
			// 价格降序/升序切换
			changePrice() {
				if(this.priceFrom == 'high') {
					this.priceFrom = 'low';
					this.priceLow();
				} else if (this.priceFrom == 'low') {
					this.priceFrom = 'high';
					this.priceHigh();
				}
			},
			//列表显示网格/列表 
			changeListType() {
				if (this.listType == 'grid') {
					this.listType = 'list';
				} else if (this.listType == 'list') {
					this.listType = 'grid';
				}
			},
			// 弹出层关闭
			closePop() {
				this.show = false;
			},
			// 弹出层显示
			openPop() {
				this.show = true;
			},
			//弹出层选择
			changeChoose(item) {
				var a= 'goodsList'+'1'
				console.log(a);
				console.log(this[a])
				console.log(this.goodsList1)
				console.log(this.a)
				if(item.id == 2) {  // newest
					for( let i = 0; i < this.goodsList1.length; i++) {
						this.goodsList1.sort((a, b) => {
						  const dateA = new Date(a.shelfData);
						  const dateB = new Date(b.shelfData);
						  return dateB - dateA;
						});
					}
				} else if ( item.id == 3 ) { 	// 顾客好评度
					for( let i = 0; i < this.goodsList1.length; i++) {
						this.goodsList1.sort((a, b) => {
							return b.collectStar - a.collectStar;
						});
					}		
				} else if ( item.id == 4 ) { 	// 价格升序
					this.priceLow()		
				} else if( item.id == 5 ) {		// 价格降序
					this.priceHigh();
				}
				this.chooseId = item.id;
				setTimeout(() => {
					this.closePop();
					this.toTop();
				}, 300)
			},
			// 回到顶部代码
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置（单位px）
					duration: 300 // 滚动动画的时长，默认300ms，单位 ms
				})
			}
		},
		created() {
			this.getSortSwiperHeight();
		},
		onShow() {
			this.toTop();
			this.getCurrentSwiperHeight('.home-data');
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.sort {
		position: fixed;
		width: 100%;
		z-index: 999;

		.scroll {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 20rpx 0;
			background-color: #fff;

			.bg {
				margin: 30rpx 12rpx 0 22rpx;
				font-size: 28rpx;
				color: #727C8E;
				background-color: #fff;
				padding: 16rpx 50rpx;
				border: 2rpx solid #727C8E;
				border-radius: 100rpx;
			}

			.bgActive {
				margin: 30rpx 12rpx 0 22rpx;
				font-size: 28rpx;
				color: #727C8E;
				background-color: #65DACC;
				padding: 18rpx 52rpx;
				border-radius: 100rpx;
			}

			.active {
				color: #fff;
			}
		}

		.choose-icon {
			display: flex;
			justify-content: space-around;
			padding-bottom: 20rpx;
			background-color: #fff;

			.choose-item {
				display: flex;
				align-items: center;
				background-color: #fff;
			}

			button::after {
				border: initial;
			}

			button:active {
				background-color: #FCFCFC;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				margin-left: 14rpx;
			}
		}
	}

	.swiper {
		z-index: -1;
	}

	.home-data {
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 20rpx;
			padding: 20rpx 0;

			.list-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 42vw;
				height: 520rpx;
				margin: 20rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 368rpx;
					border-radius: 20rpx;
				}

				text {
					padding: 4rpx;
				}

				.list-detail {
					.list-collect {
						display: flex;
						margin-top: 10rpx;

						image {
							width: 26rpx;
							height: 26rpx;
						}

						.collect-word {
							font-size: 20rpx;
							margin-left: 4rpx;
							color: #9B9B9B;
						}
					}

					.list-type {
						color: #A0A0A0;
						font-size: 24rpx;
					}

					.list-name {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: 34rpx;
					}

					.list-price {
						font-size: 28rpx;
					}
				}
			}
		}

		.list2 {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.list-item {
				display: flex;
				margin: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 0 16rpx 16rpx 0;

				image {
					width: 220rpx;
					height: 220rpx;
					border-radius: 16rpx 0 0 16rpx;
				}

				.list-detail {
					display: flex;
					flex-direction: column;
					margin: 30rpx 0 0 24rpx;

					.list-type {
						color: #9B9B9B;
						font-size: 22rpx;
					}

					.list-name {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: 32rpx;
						max-width: 470rpx;
						padding: 5rpx 0;
					}
					
					.list-specification {
						display: flex;
						justify-content: flex-start;
						text {
							color: #9B9B9B;
						}
						.goods-color {
							color: #333333;
							margin: 0 60rpx 0 10rpx;
						}
						.goods-size {
							color: #333333;
							margin-left: 10rpx;
						}
					}
					
					.list-bottom {
						display: flex;
						align-items: flex-end;
						.list-price {
							font-size: 28rpx;
							margin-top: 20rpx;
						}
						.list-collect {
							display: flex;
							align-items: center;
							margin-left: 50rpx;
						
							image {
								width: 26rpx;
								height: 26rpx;
							}
						
							.collect-word {
								font-size: 20rpx;
								margin-left: 4rpx;
								color: #9B9B9B;
							}
						}
					}
				}
			}
		}
	}

	.pop {
		padding-top: 20rpx;
		border-radius: 40rpx;
		background-color: #F8FAFB;

		.pop-title {
			text-align: center;
			font-size: 36rpx;
			padding-top: 20rpx;
		}

		.pop-contact {
			display: flex;
			flex-direction: column;
			margin-top: 60rpx;

			text {
				padding: 40rpx;
			}

			.choose {
				background-color: #65DACC;
				color: #fff;
			}
		}
	}

	.u-safe-bottom {
		background-color: #F8FAFB;
	}
</style>